<template>
  <div class="coupons-box page" ref="webview">
    <van-nav-bar title="我的优惠券" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="coupons-tab">
      <template v-for="(item,index) in couponsTab">
        <div class="tab" :key="index" :class="{active: couponsTabIndex === item.state}">
          <span class="name" ref="couponsTab" @click="couponsTabchange(index)">{{item.name}}</span>
        </div>
      </template>
      <span class="activeLine" v-if="couponsTabLeft" :style="'left:'+couponsTabLeft+'px'"></span>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:100%">
        <div class="nodata" v-if="dataList.length===0" style="height:300px;">暂无优惠券</div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>7?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false">
          <div class="coupon">
            <template v-for="(item,index) in dataList">
              <coupon-list :item="item" :key="index" />
            </template>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'addressList',
  data () {
    return {
      couponsTabIndex: 1,
      couponsTabLeft: 0,
      couponsTab: [{
        state: 1,
        name: '未使用'
      }, {
        state: 2,
        name: '已使用'
      }, {
        state: 3,
        name: '已过期'
      }],
      paramsUrl: 'list',
      apiType: 'user',
      apiUrl: 'coupon'
    };
  },
  mixins: [mixins],
  created () {
    this.params.status = 0;
    this.getList('coupon', true);
  },
  mounted () {
    this.$nextTick(() => {
      this.couponsTabLeft = this.$refs.couponsTab[this.couponsTabIndex - 1].offsetLeft;
    });
  },
  methods: {
    couponsTabchange (index) {
      this.couponsTabIndex = index + 1;
      this.params.status = index;
      this.couponsTabLeft = this.$refs.couponsTab[index].offsetLeft;
      this.getList('coupon', true);
    },
    goDetails (item) {
      if (this.$route.query.type !== 'order') {
        this.$router.push({ 'path': '/address/sub/edit', query: { id: item.id } });
      } else {
        sessionStorage.setItem('address', JSON.stringify(item));
        this.$router.go(-1);
      }
    },
    goAdd () {
      this.$router.push({ 'path': '/address/sub/add' });
    }
  }
};
</script>
<style lang="less" scoped>
.coupons-box {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
    .coupon {
      padding: 5px 20px;
    }
  }
  .coupons-tab {
    display: flex;
    background-color: #fff;
    line-height: 88px;
    position: relative;
    .tab {
      display: block;
      flex: 1;
      text-align: center;
      .name {
        font-size: 28px;
        color: #666;
      }
    }
    .tab.active {
      .name {
        color: #ff0034;
        font-weight: 800;
      }
    }
    .activeLine {
      position: absolute;
      display: block;
      bottom: 0;
      height: 4px;
      width: 83px;
      transition: left ease 0.3s;
      background-color: #ff0034;
    }
  }
}
</style>
